import React from 'react';
import { Search, Grid3X3, List } from 'lucide-react';
import type { RiskAssociationFilters } from '@/types/work';
import { RiskFilterTab, ViewMode } from '@/types/work';

interface RiskAssuranceFiltersProps {
  filters: RiskAssociationFilters;
  setFilters: (filters: Partial<RiskAssociationFilters>) => void;
  resetFilters: () => void;
}

/**
 * 风险-保障关联管理页面筛选器组件
 * 提供标签页筛选、搜索、视图切换等功能
 */
const RiskAssuranceFilters: React.FC<RiskAssuranceFiltersProps> = ({ 
  filters, 
  setFilters,
  resetFilters
}) => {
  // 标签页选项
  const tabs = [
    { value: RiskFilterTab.ALL, label: '全部高中风险' },
    { value: RiskFilterTab.HIGH, label: '高风险' },
    { value: RiskFilterTab.MEDIUM, label: '中风险' },
    { value: RiskFilterTab.UNASSOCIATED, label: '未关联风险' }
  ];
  
  // 处理搜索输入
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFilters({ searchTerm: e.target.value });
  };
  
  // 处理视图模式切换
  const handleViewModeChange = (mode: ViewMode) => {
    setFilters({ viewMode: mode });
  };
  
  return (
    <div className="space-y-4">
      {/* 标签页筛选 */}
      <div className="flex flex-wrap gap-2">
        {tabs.map(tab => (
          <button
            key={tab.value}
            onClick={() => setFilters({ tab: tab.value })}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
              filters.tab === tab.value
                ? 'bg-primary text-primary-foreground'
                : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
            }`}
          >
            {tab.label}
          </button>
        ))}
        
        <button
          onClick={resetFilters}
          className="px-4 py-2 rounded-md text-sm font-medium bg-secondary/50 text-secondary-foreground hover:bg-secondary/30 transition-colors ml-auto"
        >
          重置筛选
        </button>
      </div>
      
      {/* 搜索和视图切换 */}
      <div className="flex flex-col sm:flex-row justify-between gap-4">
        <div className="relative w-full sm:w-80">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <input
            type="text"
            placeholder="搜索风险项..."
            value={filters.searchTerm}
            onChange={handleSearchChange}
            className="w-full pl-10 pr-4 py-2 rounded-md border border-input bg-background text-sm"
          />
        </div>
        
        <div className="flex items-center space-x-2">
          <span className="text-sm text-muted-foreground mr-2">视图:</span>
          <button
            onClick={() => handleViewModeChange(ViewMode.MATRIX)}
            className={`p-2 rounded-md ${
              filters.viewMode === ViewMode.MATRIX
                ? 'bg-primary text-primary-foreground'
                : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
            }`}
            aria-label="矩阵视图"
          >
            <Grid3X3 className="h-4 w-4" />
          </button>
          
          <button
            onClick={() => handleViewModeChange(ViewMode.LIST)}
            className={`p-2 rounded-md ${
              filters.viewMode === ViewMode.LIST
                ? 'bg-primary text-primary-foreground'
                : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
            }`}
            aria-label="列表视图"
          >
            <List className="h-4 w-4" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default RiskAssuranceFilters;
